<%@page import="com.hdl.entity.MallProduct"%>
<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page import="com.hdl.service.UserService"%>
<%@page import="com.hdl.service.impl.UserServiceImpl"%>
<%@page import="com.hdl.entity.HdlUser"%>
<%@page import="java.util.*"%>
<%@page import="com.hdl.entity.MallComment"%>
<html>
<head>
<title>Insert title here</title>
<jsp:include page="/head.jsp"></jsp:include>
<link href="assets/css/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="assets/css/css/productviewgallery.css" media="all" />
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/plugins/growl-notification/growl-notification.min.js"></script>
<script src="assets/js/sys.js"></script>
<style>
.m-hd .m-nav a {
	color: white;
}

html, body {
	background-color: #f0f2fa;
	font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial",
		sans-serif;
	color: #555f77;
	-webkit-font-smoothing: antialiased;
}

input, textarea {
	outline: none;
	border: none;
	display: block;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial",
		sans-serif;
	font-size: 1rem;
	color: #555f77;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: #ced2db;
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: #ced2db;
}

input:-moz-placeholder, textarea:-moz-placeholder {
	color: #ced2db;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: #ced2db;
}

p {
	line-height: 1.3125rem;
}

.comments {
	margin: 2.5rem auto 0;
	max-width: 60.75rem;
	padding: 0 1.25rem;
}

.comment-wrap {
	margin-bottom: 1.25rem;
	display: table;
	width: 100%;
	min-height: 5.3125rem;
}

.photo {
	padding-top: 0.625rem;
	display: table-cell;
	width: 3.5rem;
}

.photo .avatar {
	height: 2.25rem;
	width: 2.25rem;
	border-radius: 50%;
	background-size: contain;
}

.comment-block {
	padding: 1rem;
	background-color: #fff;
	display: table-cell;
	vertical-align: top;
	border-radius: 0.1875rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.comment-block textarea {
	width: 100%;
	max-width: 100%;
}

.comment-text {
	margin-bottom: 1.25rem;
}

.bottom-comment {
	color: #acb4c2;
	font-size: 0.875rem;
}

.comment-date {
	float: left;
}

.comment-actions {
	float: right;
}

.comment-actions li {
	display: inline;
}

.comment-actions li.complain {
	padding-right: 0.625rem;
	border-right: 1px solid #e1e5eb;
}

.comment-actions li.reply {
	padding-left: 0.625rem;
}
</style>
</head>
<body>
<jsp:include page="/header.jsp"></jsp:include>
	<!--购物车-->
	<jsp:include page="/cartLog.jsp"></jsp:include>

<div class="main_bg" style="position:relative;top:100px;margin-left:200px">
<div class="wrap">	
	<div class="main">
	<% MallProduct ma = (MallProduct)request.getAttribute("shop"); %>
	<!-- start content -->
	<div class="single">
			<!-- start span1_of_1 -->
			<div class="left_content">
			<div class="span1_of_1">
				<!-- start product_slider -->
				<div class="product-view">
				    <div class="product-essential">
				        <div class="product-img-box">
				    <div class="product-image"> 
				        <a class="cs-fancybox-thumbs cloud-zoom" rel="adjustX:30,adjustY:0,position:'right',tint:'#202020',tintOpacity:0.5,smoothMove:2,showTitle:true,titleOpacity:0.5" data-fancybox-group="thumb" href="images/0001-2.jpg" title="Women Shorts" alt="Women Shorts">
				           	<img src="<%=ma.getMallProductPath() %>" style="width=300px; height:300px; "/>
				        </a>
				   </div>
				</div>
				</div>
				</div>
				<!-- end product_slider -->
			</div>
			
			
				
			<!-- start span1_of_1 -->
			<div class="span1_of_1_des">
				  <div class="desc1" style="position: relative; left: -100px;">
					  <!-- 商品標題 -->
					<h3><%=ma.getMallProductName() %></h3>
					<p><%=ma.getMallProductMs() %></p>
					<h5><%=ma.getMallProductPrice1() %> 元</h5>
					<div class="available">
						<h4>选择</h4>
						<ul>
							<li>数量
								<select id="num" name="num">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
								</select>
							</li>
						</ul>
						<div class="btn_form">
							<form id="add_form">
								<input type="hidden" id="mallProductId" name="mallProductId" value="<%=ma.getMallProductId() %>" />
								<input type="submit" value="添加到购物车" title="" />
							</form>
						</div>
						<span class="span_right"></span>
						<div class="clear"></div>
					</div>
				
			   	 </div>
			   	</div>
			   	<div class="clear"></div>
			   	<!-- start tabs -->
			   	</div>
			   	<!-- start sidebar -->
          	    <div class="clear"></div>
	       </div>	
	<!-- end content -->
	</div>
	
	<!-- 评论区 start -->
	<div class="comments">
	<c:if test="${not empty commentList }">
	<%-- <c:forEach items=" ${commentList }" var="item" varStatus="s"> --%>
	<% 
		List<MallComment> list = (List) request.getAttribute("commentList");
		for(MallComment comment : list){
	%>
    <div class="comment-wrap">
        <div class="photo">
        	<h4><%=service.selectUserById(comment.getHdlUserId()).getHdlUserName() %></h4>
            <div class="avatar" style="background-image: url('<%=service.selectUserById(comment.getHdlUserId()).getHdlUserLog() %>')"></div>
        </div>
        <div class="comment-block">
            <p class="comment-text"><%=comment.getMallCommentMessage() %></p>
            <div class="bottom-comment">
                <div class="comment-date"><%=comment.getMallCommentTime() %></div>
            </div>
        </div>
    </div>
    <%} %>
   <%--  </c:forEach> --%>
    </c:if>
    <c:if test="${ empty commentList }">
    <h2>该商品还没有评论</h2>
    </c:if>
<!-- 评论区 结束 -->
</div>
</div>
</div>	
<%!
	private UserService service = new UserServiceImpl();
%>
</body>
</html>
<script>
	var form = document.querySelector("#add_form");
	

	form.onsubmit = function () {

		var id = $("#mallProductId").val();
		var num = $("#num").val();
		
		//发送异步请求把商品添加到购物车
		$.post(
				"addProduct.let",
				{mallProductId:id,num:num},//传入商品的id 数量
				function (data) {
					console.log(data.code);
					if(data.code == '1'){//添加失败
						sys.toastr.warn("商品添加失败");
					    
					}else{
						sys.toastr.success("商品添加成功");
					}
				},
				"json"
		);

		return false;
	}
</script>